<template>
    <div class="home">
        <headerView class="header" :headerTitle="headerTitle" />
        <div class="home-content">
            <div class="home-row" v-for="item in tabItem" :key="item.id">
                <div class="row-left">
                    <img :src="item.headImag" alt="头像">
                </div>
                <div class="row-right">
                    <div class="up">
                        <div class="up-left">{{ item.uploader }}</div>
                        <div class="up-right"></div>
                    </div>
                    <div class="down">
                        <div class="down-up">
                            <div>{{ item.describe }}</div>
                        </div>
                        <div class="down-down">
                            <div class="down-content">
                                <div class="down-content-item" v-for="(info, index) in item.conciseFileInfos"
                                    :key="info.id" @click.stop="viewBigPicture(item.conciseFileInfos, index)">
                                    <!-- @click.stop="readPicture()" -->
                                    <div class="item-content" v-if="!isPicture(info.extName)">
                                        <div class="item-icon">
                                            <img :src="getIcon(info.extName)" alt="">
                                        </div>
                                        <p>{{ info.fileName }}</p>
                                    </div>
                                    <!-- <div class="file-picture"><img :src="info.extName" alt=""></div> -->
                                    <div class="demo-image__preview" v-if="isPicture(info.extName)">
                                        <el-image style="width: 87px; height: 87px" :src="info.extName" :zoom-rate="1.2"
                                            :max-scale="7" :min-scale="0.2" ref="previewImg" fit="cover" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="footer">
                            <div>{{ item.operationTime }}</div>
                            <div class="footer-right">··</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <readPicture v-if="showImageViewer" v-model:showImageViewer="showImageViewer" :urls="urls"
            :currentIndex="currentIndex" />
    </div>
</template>

<script setup name="Home">
import { onMounted, ref } from 'vue';
import request from '@/utils/request';
import headerView from '@/components/Header/index.vue';
import getIcon from '@/components/Function/GetIcon';
import readPicture from './readPicture';
const showImageViewer = ref(false);
const urls = ref([]);
const currentIndex = ref(0);
const headerTitle = ref({
    title: '首页',
    aline: 'left'
});
const tabItem = ref([]);

const inteTable = () => {
    request({
        url: 'api/FileUploagLogs',
        method: 'get',
    }).then(res => {
        if (res != undefined) {
            var array = res.data;
            Array.from(array).forEach(item => {
                Array.from(item.conciseFileInfos).forEach(ext => {
                    if (ext.extName == '.jpg' || ext.extName == '.png' || ext.extName == '.jpeg' || ext.extName == '.gif' || ext.extName == '.bmp') {
                        ext.extName = 'http://localhost:5198/api/FileInfos/' + ext.id;
                    }
                });
            });
            tabItem.value = array;
        }
    });
};
const isPicture = (extName) => {
    if (extName.indexOf('http') == 0) {
        return true;
    } else {
        return false;
    }
};
// 实现图片预览功能，点击放大图片进行阅览。当图片是横向时（宽大于高），图片宽度为屏幕宽度，高度自适应；
// 当图片是纵向时（高大于宽），图片高度为屏幕高度，宽度自适应。
const viewBigPicture = (infos, index) => {
    if (infos[index].extName.indexOf('http') == 0) {
        var imgUrls = ref([]);
        Array.from(infos).forEach(item => {
            imgUrls.value.push(item.extName);
        });
        urls.value = imgUrls.value;
        currentIndex.value = index;
        showImageViewer.value = true;
    } else {
        ElMessage({
            message: '暂不支持预览文件',
            type: 'warning',
            plain: true,
        });
    }
};
onMounted(() => {
    inteTable();
});
</script>

<style scoped>
.home {
    widows: 100vw;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.home-content {
    margin: 0 auto;
    width: 90%;
    height: calc(100% - 60px);
    padding-top: 60px;
}

.home-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 20px;
    border-bottom: 1px solid #eee;
}

.row-left {
    width: 50px;
    height: 100%;
    margin-right: 5px;
}

.row-left img {
    width: 100%;
    min-width: 50px;
    /* 设置宽高比 1:1 */
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.row-right {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.up {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.up-left {
    width: 70%;
    font-size: 20px;
    font-weight: 600;
}

.up-right {
    width: 10%;
    font-size: 10px;
    color: #000;
    font-weight: 700;
}

.down {
    width: 100%;
    height: 100%;
}

.down-up {
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.down-down {
    width: 100%;
}

.down-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
    margin-top: 10px;
}

.down-content-item {
    background-color: #f4f4f4;
    aspect-ratio: 1 / 1;
    height: 87px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #999;
    border-radius: 3px;
}

.file-picture {
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
}

.file-picture img {
    width: 100%;
    height: 100%;
}

.item-content {
    width: 100%;
    height: 100%;
    padding: 0 5px;
    overflow: hidden;
}

.item-icon {
    margin: 0 auto;
    padding: 5px 5px;
    width: 40px;
    height: 40px;
}

.item-icon img {
    width: 100%;
    height: 100%;
}

.item-content p {
    font-size: 12px;
}

.footer {
    font-size: 12px;
    color: #999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 8px;
}

.footer-right {
    width: 20px;
    height: 13px;
    text-align: center;
    background-color: #eee;
    font-size: 10px;
    color: #000;
    font-weight: 700;
}


.demo-image__error .image-slot {
    font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
    font-size: 30px;
}

.demo-image__error .el-image {
    width: 100%;
    height: 200px;
}
</style>